<template>
  <div class="word-cloud">
    <a-row class="word-cloud-row" :gutter="[16, 16]">
      <a-col class="word-cloud-col" v-bind="colSetting">
        <div ref="chartRef" class="word-cloud-ref"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { ColProps } from 'ant-design-vue';

const colSetting: ColProps = {
  span: 24
};
// 定义props类型
interface WordCloudData {
  name: string;
  value: number;
}

interface Props {
  data: WordCloudData[];
  options?: echarts.EChartsOption;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => []
});

const chartRef = ref<HTMLDivElement>();
let chart: echarts.ECharts | null = null;

// 默认的词云配置
const defaultOptions: echarts.EChartsOption = {
  backgroundColor: 'transparent', // 设置背景透明
  borderRadius: '4px',
  legend: {
    borderRadius: 5 // 圆角
  },
  tooltip: {
    show: true,
    position: 'top',
    formatter: (params: any) => {
      return `${params.data.name}: ${params.data.value}`;
    }
  },
  series: [
    {
      type: 'wordCloud',
      shape: 'circle',
      left: 'center',
      top: 'center',
      width: '90%',
      height: '90%',
      right: null,
      bottom: null,
      sizeRange: [12, 60],
      rotationRange: [-45, 45],
      rotationStep: 45,
      gridSize: 8,
      drawOutOfBound: false,
      layoutAnimation: true,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        color: function () {
          return 'rgb(' + [
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160),
            Math.round(Math.random() * 160)
          ].join(',') + ')';
        }
      },
      emphasis: {
        focus: 'self',
        textStyle: {
          textShadowBlur: 10,
          textShadowColor: '#999'
        }
      },
      data: []
    }
  ]
};

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);
  updateChart();
};

// 更新图表数据
const updateChart = () => {
  if (!chart) return;

  const seriesOption = {
    ...defaultOptions.series![0],
    data: props.data
  };

  const finalOptions = {
    ...defaultOptions,
    series: [seriesOption],
    ...props.options
  };

  chart.setOption(finalOptions);
};

// 响应窗口大小变化
const handleResize = () => {
  chart?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  chart?.dispose();
});

// 监听数据变化
watch(
  () => props.data,
  () => {
    updateChart();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.word-cloud {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: 12px;
  &-row {
    flex: 1;
  }

  &-col {
    height: 100%;

    .radar-ref {
      height: 100%;
    }
  }

  @media (max-width: 992px) {
    &-row {
      flex-direction: column;
    }

    &-col {
      flex: 1;
      height: auto;
    }
  }
}
.word-cloud-ref {
  width: 100%;
  height: 96%;
  margin-top: 12px;
  background-color: #ffffff;
  padding: 16px;
  border-radius: 6px;
}
</style>
